<template>
 <div class="demo">
<!--   <h3 class="demo-title">{{ component.__sourceCodeTitle }}</h3>-->
   <div class="demo-content">
     <div class="demo-component">
       <component :is="component"></component>
     </div>
     <div class="demo-code" v-if="codeVisible">
       <pre class="language-html" v-html="html" />
     </div>
     <div class="demo-actions">
      <!--       <Button @click="hideCode" v-if="codeVisible">隐藏代码</Button>-->
       <Button @click="showCode">{{ !codeVisible? '查看代码': '隐藏代码' }}</Button>
     </div>
   </div>
 </div>
</template>

<script lang="ts">
import Button from '../lib/Button/Button.vue'
import 'prismjs';
import 'prismjs/themes/prism.css'
import { computed ,ref} from 'vue'
const Prism = (window as any).Prism
export default {
  name: "Demo",
  components: { Button },
  props: {
    component: Object
  },
  setup(props) {
    console.log(props.component,'props.component')
    const html = computed(()=>{
      return Prism.highlight(props.component.__sourceCode, Prism.languages.html, 'html')
    })
    const codeVisible = ref(false)
    const showCode = () => {
      codeVisible.value = !codeVisible.value
      console.log(codeVisible.value)
    }
    // const hideCode = () => codeVisible.value = false
    return { Prism, html, codeVisible,showCode,  }
  }
}
</script>

<style lang="scss" scoped>
  $border-color: #ebebeb;
  .demo {
    margin: 16px 0 42px;
    &>h3 {
     margin-bottom:15px;
     font-size: 22px;
    }
    &-content {
      border: 1px solid $border-color;
      border-radius: 3px;
      transition: .2s;
      &:hover {
        box-shadow: 0 0 8px rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
      }
    }
    &-component {
      padding: 15px 24px;
      line-height: 50px;
    }
    &-actions {
      padding: 10px 16px;
      border-top: 1px solid $border-color;
      text-align: center;
    }
    &-code {
      border-top: 1px solid $border-color;
      transition: .2s;
      .language-html {
        margin: 0px;
      }
    }
  }
</style>
